<template>
  <div class="album">
    <albumRow></albumRow>
    <el-empty 
    v-if="keyword==``||albums.length==0"
    :image="`${url}/images/empty.png`"
    :description="keyword==''?`咱 搜 不 到 任 何 东 西 呀！为 你 推 荐 以 下 内 容`:'咱 搜 不 到 任 何 东 西 呀！'"
    ></el-empty>
    <albumLine :col="index" :album="item"  v-for="(item, index) of albums" :key="index"></albumLine>
  </div>
</template>

<script>
import albumRow from '../components/albumRow.vue'
import albumLine from '../components/albumLine.vue'
import { mapState } from 'vuex';
export default {
    components:{
      albumRow,
      albumLine
    },
    data(){
      return {
        albums:[]
      }
    },
    props:{
        keyword:null,
        url:null
    },
    computed:{
      ...mapState({
        collectAblum:state=>state.collectAblum
      })
    },
    watch:{
      keyword(){
        this.getSearch()
      }
    },
    methods:{
      getSearch(){
            this.$store.commit("getSearch",[3,this.keyword,(data)=>{
            this.albums=data
            console.log(this.albums);
        }])
        }
    },
    mounted(){
      this.getSearch()
    }
}

</script>

<style>

</style>